<template>
  <div class="list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <van-grid :column-num="3">
        <van-grid-item
          v-for="item in categories"
          :key="item.id"
          :icon="item.coverImage | dalImg"
          :text="item.name"
          :to="{
            name: 'ProductList',
            query: {
              tid: item.id,
              tname: item.name,
            },
          }"
        />
      </van-grid>
      <van-card
        v-for="(item, index) in products"
        :tag="index < 8 ? '热卖' : ''"
        :key="item.id"
        :num="item.amount"
        :price="item.price.toFixed(2)"
        :origin-price="(item.price * 1.3).toFixed(2)"
        :title="item.name"
        :thumb="item.coverImage | dalImg"
        @click="toDetail(item.id)"
      >
        <!-- <template #footer>
        <van-button size="mini">按钮</van-button>
        <van-button size="mini">按钮</van-button>
      </template> -->
      </van-card>
    </van-list>
  </div>
</template>

<script>
import { loadProductsAPI } from "../services/product";
import { loadProductCategories } from "../services/product-categories";
export default {
  name: "List",
  data() {
    return {
      products: [],
      page: 1,
      pages: 1,
      loading: false, //加载状态,开始获取数据的时候设置味true，结束之后设置为false
      finished: false, //是否加载完成
      categories: [],
    };
  },
  async created() {
    // this.loadData();
    const resCategories = await loadProductCategories(); //商品分类列表
    this.categories = resCategories.data; //商品分类列表
  },
  methods: {
    async loadData() {
      if (this.page > this.pages) {
        this.finished = true;
        return;
      }
      this.loading = true;
      const res = await loadProductsAPI(this.page);
      this.page++;
      this.pages = res.pages; //商品总页数
      this.products.push(...res.data);
      this.loading = false;
    },
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style></style>
